<template>
  <div class="page bgc-fff">
    <x-header title="事故上报"></x-header>
    <!-- main -->
    <div class="mt46 main">
      <!-- waybillNo -->
      <div class="flex a-between l-center pad15 bgc-f5f9fd bor-bottom">
        <div class="f16 c-445c95">
          <span class="bold">运单：</span><span>CO2018090215111</span>
        </div>
        <div class="f14 c-3fa6f3">
          <!-- 已出库 -->
        </div>
      </div>
      <!-- type -->
      <div class="pad15 flex a-between l-center bor-bottom">
        <div class="c-000 f16">
          类型
        </div>
        <div class="c-999 f16 flex a-end l-center">
          <input v-model.trim="driverParam.accidentName" class="cell-input ta-r mr10" type="text"
          style="font-size:.14rem;color:#000;"
          placeholder="请选择" readonly="true" id="multiPickerOnstie1" @focus="showPickTime" />
          <img class="icon-btn-right" :src="staticImgData.btnRightUrl" alt="">
        </div>
      </div>
      <!-- dcs -->
      <div class="pad15 ta-l f16 c-000">
        描述
      </div>
      <div class="pad-l-r15 pad-t5 pad-b15 bor-bottom">
        <textarea name="" v-model.trim="driverParam.cancelReason" id="textarea1" cols="30" rows="3"
          placeholder="请输入相关异常/事故信息"></textarea>
      </div>
      <div class="pad15 ta-l f16 c-000">
        照片
      </div>
      <div class="flex a-left l-center pad-l-r15 mt25 mb30 flex-wrap" id="addImgBox">
        <div class="item-img-box mr25 mb15"
          v-for="(item,index) in subImgList" :key="index">
          <img class="icon-logo" :src="item.addImgUrl" alt="" >
          <i @click="deleteClick(index)"></i>
        </div>
        <v-upload-img
          class="addImgBg mb15"
          @upload-img-start='uploadImgStart'
          @upload-img-end='uploadImgEnd'
          :upload-post-data="postData"
          :upload-img-obj="uploadImgData[0]"></v-upload-img>
      </div>
      <!-- button -->
      <div class="pad-l-r15">
        <p class="large-btn bgc-01a4f6" @click="subButton">提交</p>
      </div>
    </div>
    <!-- loading -->
    <v-loading  v-show="loadingShow"></v-loading>
    <!-- 下方弹出组件 -->
    <div class="down-picker-bg " :class="[{'down-picker-bg-up':downPickerShow}]" >
      <div class="down-picker-container" :class="[{'down-picker-container-up':downPickerShow}]">
        <div class="down-picker-title">
          异常/事故类型
        </div>
        <div class="down-picker-content">
          <div class="down-picker-content-item"
           v-for="(item2,index2) in accidentTypeData" :key="index2"
            :class="[{'active':accidentIndex == index2 }]"
            data-accidentCode="item.accidentCode" @click="accidentRadioClick(index2)">
            <div class="down-picker-content-item-left">
              {{item2.accidentName}}
            </div>
            <div class="down-picker-content-item-right">
              <div class="select-radio-item">
                  <em class="select-radio-item-q" :class="[{'active':accidentIndex== index2}]">
                    <i></i>
                  </em>
              </div>
            </div>
          </div>
        </div>
        <div class="down-picker-btn-box" @click="closeDownPicker">
          确定
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { XHeader } from 'vux'
import { Toast } from 'mint-ui'
import UploadImg from '@/components/common/uploadImg/upload_type_two'
import { getToken } from '@/api/qiniu'
import Loading from '@/components/common/loading/loading'
// import * as QiniuApi from '@/api/qiniu'
const QINIU_API = process.env.QINIU_API
const AttachDemoImgSrc = require('@/assets/image/common/add_img_bg.png')
import '@/styles/downPicker.css'
export default {
  name: 'shipOrder-accidentReport',
  data() {
    return {
      staticImgData: {
        loginUrl: require('@/assets/image/common/user.png'),
        addImgBgUrl: require('@/assets/image/common/add_img_bg.png'),
        btnRightUrl: require('@/assets/image/common/btn_right.png')
      },
      driverParam: {
        accidentName: '',
        accidentCode: '',
        accidentDsc: '',
        imgkey: []
      },
      postData: {
        token: '',
        imageUrl: QINIU_API,
        key: ''
      },
      accidentTypeData: [],
      accidentIndex: 0,
      downPickerShow: false,
      uploadImgData: [
        {
          fileMark: 'idCard',
          title: '',
          licenseTypeId: '1',
          attachTypeId: '01',
          attachDemoImgSrc: AttachDemoImgSrc,
          attachImgSrc: ''
        }
      ],
      subImgList: [
        { addImgUrl: 'http://img02.tooopen.com/images/20150507/tooopen_sy_122395947985.jpg' },
        { addImgUrl: 'http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg' }
      ],
      spCode: '', // 整个装车单code
      stCode: '', // 单个运输任务code
      loadingShow: false // loading显隐
    }
  },
  components: {
    XHeader,
    'v-loading': Loading,
    'v-upload-img': UploadImg
  },
  created() {
    // console.log('this.$route.params', this.$route.params)
    this.spCode = this.$route.params.spCode
    this.stCode = this.$route.params.stCode
    this.accidentTypeData = [
      { accidentName: '事故', accidentCode: 1 },
      { accidentName: '施工', accidentCode: 2 },
      { accidentName: '拥堵', accidentCode: 3 },
      { accidentName: '道路积水', accidentCode: 4 },
      { accidentName: '封路', accidentCode: 5 }
    ]
    this.getQiniuToken()
  },
  mounted() {

  },
  methods: {
    getQiniuToken: function() {
      const that = this
      getToken().then(res => {
        if (res.code === 0) {
          that.postData.token = res.data
        }
      }).catch(res => {
        console.warn('error', res)
      })
    },
    // 图片开始上传
    uploadImgStart: function() {
      this.loadingShow = true
    },
    // 子组件-上传图片后-通知父组件
    uploadImgEnd: function(qiniuResData) {
      const that = this
      const new_obj = { addImgUrl: '' }
      if (qiniuResData.status) {
        that.loadingShow = false // 临时
        new_obj.addImgUrl = qiniuResData.imgPath
        that.subImgList.push(new_obj)
        that.updateFileDataFunc(qiniuResData)
      } else {
        that.loadingShow = false
        Toast({
          message: '图片上传失败',
          duration: 2000
        })
      }
    },
    updateFileDataFunc: function(qiniuResData) {
      // const fileinfo = qiniuResData
      // this.loadingShow = true
      console.log('fileinfo')
      // QiniuApi.updateDriverAttach(fileinfo).then(res => {
      //   console.log('updateDriverAttach', res)
      //   if (res.code === 0) {
      //     // 图片上传成功后 触发父组件事件
      //     // if (fileinfo.keyTypeName === 'driverLicense') {
      //     //   this.getImgUrlFun(this.driverParam.driverLicenseKey) // 用hash 换取七牛imgurl
      //     // }
      //   } else {
      //     //
      //   }
      // }).catch(res => {
      //   this.loadingShow = false
      //   console.warn('error', res)
      // })
    },
    // 异常事故picker展示
    showPickTime: function() {
      const that = this
      that.downPickerShow = true
    },
    // 删除上传图片
    deleteClick: function(index) {
      const that = this
      that.subImgList.splice(index, 1)
    },
    accidentRadioClick: function(index) {
      this.accidentIndex = index
    },
    closeDownPicker: function() {
      const that = this
      const selectItem = that.accidentTypeData[that.accidentIndex]
      that.downPickerShow = false
      that.driverParam.accidentName = selectItem.accidentName
      that.driverParam.accidentCode = selectItem.accidentCode
    },
    subButton: function() {
    }
  }
}
</script>

<style scoped>
@import '../../styles/util.css';
/* common */
#textarea1{
  border: none;
  outline: none;
  width: 100%;
  font-size: .14rem;
}
.cell-input{
  font-size: .16rem;
}
.addImgBg{
  overflow: hidden;
  width: .55rem;
  height: .55rem
}
.icon-logo{
  display: block;
  width: .55rem;
  height: .55rem
}
.item-img-box{
  position: relative;
  width: .55rem;
  height: .55rem
}
.item-img-box>i{
  display: block;
  width: .16rem;
  height: .16rem;
  position: absolute;
  right: -0.06rem;
  top:-0.06rem;
  background: url('../../assets/image/common/icon_close_black.png') no-repeat center;
  background-size: 100%;
}
</style>
